<style lang="scss">
$scale: 1.2;
.idverify {
  .header {
    display: flex;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 16px;
    height: 55px;

    .header_left {
      span {
        font-size: 18px;
        color: #1f88fe;
      }
    }

    .header_right {
      span {
        font-size: 18px;
        color: #1f88fe;
      }
    }
  }
  .body {
    .title {
      color: #1f88fe;
      font-size: 18px;
      text-align: center;
    }
    .head_img {
      margin-top: 20px;
      margin-bottom: 36px;
      img {
        width: 175px;
        // height: 250px;
      }
    }
    .text {
      margin-left: 30px;
      margin-right: 30px;
      p {
        margin-top: 10px;
        line-height: 18px * $scale;
        text-align: left;
        font-size: 12px * $scale;
        color: #333333;
      }
      margin-bottom: 50px;
    }
  }
  .button {
    // margin-right: auto;
    // margin-left: auto;
    width: 160px * $scale;
    margin-bottom: 20px;
    // height: 45px * $scale;
    // line-height: 45px * $scale;
    // font-size: 18px * $scale;
    // border-radius: 4px * $scale;
    // color: #ffffff;
    // text-align: center;
    // background-color: #1f88fe;
  }
}
</style>
<script>

import { Toast } from 'mint-ui'
import { MessageBox } from 'mint-ui'
import { Const } from '@/consts'

import userAPI from '@/api/user'
import examApi from '@/api/exam'
export default {
  data () {
    return {
      result: {},
      courseId: ''
    }
  },
  created () {
    userAPI.getUserInfo().then(resp => {
      this.result = resp.result
    })
    this.courseId = this.$route.query.courseId
  },
  methods: {
    
    goBack () {
      // console.log('点击了返回按钮')
      this.$router.push({ path: '/exam/start', query: { courseId: this.courseId } })
    },

    uploadPhoto() {
      this.$refs.photoFile.click()
    },

    handlePhotoFileChange() {
      const file = this.$refs.photoFile.files[0]
      
      if (!file) {
        return;
      }

      this.$refs.photoFileForm.reset();

      examApi.compareFace({
        params: {
          courseid: this.courseId,
          facepic: file
        }
      }).then(resp => {
        if (resp[Const.RESP_RESULT] === true) {
          // Toast('验证通过，开始考试 ...')
          this.doTest()
        } else {
          this.showFailDialog()
        }
      }).catch(resp => {
        this.showFailDialog()
      })
      
    },

    showFailDialog() {
      MessageBox.confirm('没有通过验证,请重新验证<br/>您要继续验证吗？', '温馨提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        closeOnClickModal: false,
        type: 'info'
      }).then(action => {
        this.uploadPhoto()
      }).catch(() => {
        
      });
    },

    doTest() {
        const courseId = this.courseId;

        if (!courseId) {
            return;
        }

        //////////////////////////////////////
        this.$router.push({path: '/exam', query: {
            courseId: courseId,
            examType: '1'
        }});
        //////////////////////////////////////

        // examApi.startExam({
        //     params: {
        //         courseid: courseId,
        //         examtype: 'REAL'
        //     }
        // }).then((resp) => {
        //     const result = resp[Const.RESP_RESULT];
        //     if (result === true || (result && result[Const.RESP_RESULT] === true)) {
        //         this.$router.push({path: '/exam', query: {
        //             courseId: courseId,
        //             examType: '1'
        //         }});
        //     } else {
        //         Toast('很抱歉，您暂时不能进行考试');
        //     }
        // }).catch((resp) => {
        //     // Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
        //     // this.buttonEnabled.test = true;
        //     if (resp.statusCode == '200') {
        //         Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
        //     }
        // });
    }
  }
}
</script>
<template>
  <div class="idverify">
    <header class="header">
      <div class="header_left">
        <span @click="goBack">
          <i class="mintui mintui-back"></i>返回</span>
      </div>
      <div class="header_right">
        <span @click="goBack">取消</span>
      </div>
    </header>
    <div class="body">
      <div class="title">身份确认</div>
      <div class="head_img">
        <img :src="result.avatarurl" />
      </div>
      <div class="text">
        <p>由于考试实名制规定，在每次考试的开始前、过程中、结束后都必须经过人脸识别与学员照片进行比对，待身份鉴定通过后方可继续。</p>
        <p>请确保设备的摄像头连接正常，并点击下面按钮开始。</p>
      </div>
    </div>
    <!-- <div class="button" @click="uploadPhoto">开始</div> -->
    <mt-button type="primary" class="button" @click="uploadPhoto">开始</mt-button>
    <div>
      <form action="javascript:;" ref="photoFileForm">
        <input ref="photoFile" type="file" v-show="false" @change="handlePhotoFileChange" accept="image/*" capture="camera"/>
      </form>
    </div>
  </div>
</template>
